<template>
  <div class="popup">
    <van-search
      v-model="inputValue"
      show-action
      :placeholder="defaultKeyword.keyword"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>
    <HistoryHot
      v-if="blockShowNum == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @listClickFn="listClickFn1"
      @getPopupData="getPopupData"
    />
    <Products v-else-if="blockShowNum == 2" :keyword="keyword" />
    <List v-else :listArr="listArr" @listClickFn="listClickFn1" />
  </div>
</template>

<script>
/*
    历史记录与热门搜索   HistoryHot    1
    产品区块            Products      2
    列表区块            List          3
*/
import HistoryHot from "../components/popup/HistoryHot.vue";
import List from "../components/popup/List.vue";
import Products from "../components/popup/Products.vue";
import { PopupApi, SearchHelperApi } from "../request/api";
let timer = null;   // 定时器名称
export default {
  data() {
    return {
      inputValue: "", // 输入框的值
      blockShowNum: 1, // 1-历史记录   2-产品    3-列表
      historyKeywordList: [], // 历史记录的数组
      hotKeywordList: [], // 热门搜索的数组
      defaultKeyword: {}, // defaultKeyword.keyword -> placeholder
      listArr: [],
      keyword: "", // 产品区块的关键词
    };
  },
  components: {
    HistoryHot,
    List,
    Products,
  },
  methods: {
    // List组件触发的函数
    listClickFn1(num, str) {
      // 显示产品区块
      this.blockShowNum = num;
      this.keyword = str; // 把keyword传到Products组件
    },
    // 输入框输入事件
    onInput() {
      // 防抖
      let ifAjax = true; // 默认允许做请求
      // 显示列表区块
      this.blockShowNum = 3;

      // 无论如何,都清除一次定时器
      if(timer){
        clearTimeout(timer);
      }

      if (ifAjax) {
        ifAjax = false; // 立刻禁止再次请求
        timer = setTimeout(() => {
          // 调用接口
          SearchHelperApi({ keyword: this.inputValue }).then((res) => {
            if (res.errno == 0) {
              this.listArr = res.data;
            }
            ifAjax = true;  // 当这个请求结束的时候,放开权限,让用户可以做请求
            clearTimeout(timer);  // 当我请求成功时,清除定时器
          })
        }, 200);
      }
    },
    onSearch(value) {
      // 显示产品区块
      this.blockShowNum = 2;
      this.keyword = value; // 把keyword传到Products组件
    },
    onCancel() {
      // 调回首页
      this.$router.go(-1);
    },
    // 获取popup数据
    getPopupData() {
      // 历史记录与热门搜索接口请求
      PopupApi().then((res) => {
        if (res.errno === 0) {
          let { historyKeywordList, defaultKeyword, hotKeywordList } = res.data;
          this.historyKeywordList = historyKeywordList;
          this.defaultKeyword = defaultKeyword;
          this.hotKeywordList = hotKeywordList;
        }
      });
    },
  },
  created() {
    // 为什么要延迟请求,原因是想让Loading显示在正中间
    setTimeout(() => {
      this.getPopupData();
    }, 500);
  },
};
</script>
 
<style lang = "less" scoped>
.popup {
  position: absolute;
  top: 0;
  width: 100%;
  min-height: 100%;
  background: #efefef;
}
</style>